<template>
    <div>
        <div
            class="echart-h box"
            id="qcPoint"
            v-if="['zlzx', 'cm', 'jxdw'].includes(indexCode)"
        ></div>
        <cockpitSearch
            v-if="['jys', 'bzr'].includes(indexCode)"
            @handleSearch="handleSearch"
            @getTableData="getTableData"
            :manageType="manageType"
            ref="qcPointcockSearch"
            @downloadFile="downloadFile"
        ></cockpitSearch>
        <searchner
            v-else
            @handleSearch="handleSearch"
            @getTableData="getTableData"
            :manageType="manageType"
            ref="qcPointSearch"
            @downloadFile="downloadFile"
        ></searchner>

        <el-table
            class="mt-10"
            v-if="['zlzx', 'cm', 'jxdw'].includes(indexCode)"
            data-table
            v-loading="tableLoading"
            element-loading-text="数据加载中..."
            element-loading-background="rgba(255, 255, 255, 0.2)"
            stripe
            :data="tableData"
        >
            <el-table-column
                label="序号"
                type="index"
                width="65"
            ></el-table-column>
            <el-table-column property="level" label="层面">
                <!-- <template slot-scope="scope">{{
                    scope.row.level | filteType
                }}</template> -->
            </el-table-column>
            <el-table-column property="angle" label="角度"></el-table-column>
            <el-table-column
                width="120"
                property="objectName"
                label="所属诊改对象"
            ></el-table-column>
            <el-table-column
                width="110"
                property="qualityName"
                label="质控点名称"
            ></el-table-column>
            <el-table-column
                width="130"
                property="orgName"
                label="质控点归属部门"
            ></el-table-column>
            <el-table-column
                property="standardValue"
                label="标准值"
            ></el-table-column>
            <el-table-column
                property="targetValue"
                label="目标值"
            ></el-table-column>
            <el-table-column
                property="autoUpdateValue"
                width="130"
                label="业务系统数据"
            ></el-table-column>
            <el-table-column
                property="personnelTrainingState"
                width="130"
                label="填报系统数据"
            ></el-table-column>
            <el-table-column
                property="warningState"
                width="100"
                label="预警状态"
            >
                <!-- <template slot-scope="scope">
                    <div class="flex-c">
                        <span>{{
                            scope.row.warningState == 1 ? "未完成" : "已完成"
                        }}</span>
                    </div>
                </template> -->
            </el-table-column>
            <el-table-column
                width="120"
                property="totalAlerts"
                label="预警总次数"
            ></el-table-column>
            <el-table-column
                width="120"
                property="alertsProcessed"
                label="预警处理次数"
            ></el-table-column>
            <el-table-column label="操作" fixed="right" width="100">
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        size="small"
                        @click="lockDetail(scope.row)"
                        >查看明细</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-table
            class="mt-10"
            v-else
            data-table
            v-loading="tableLoading"
            element-loading-text="数据加载中..."
            element-loading-background="rgba(255, 255, 255, 0.2)"
            stripe
            :data="tableData"
        >
            <el-table-column
                label="序号"
                type="index"
                width="65"
            ></el-table-column>
            <el-table-column
                width="100"
                :property="['bzr'].includes(indexCode) ? 'studentName' : 'teacherName'"
                :label="['bzr'].includes(indexCode) ? '学生姓名' : '教师姓名'"
            >
            </el-table-column>
            <el-table-column
                width="120"
                property="affiliatedCollege"
                :label="
                    ['bzr'].includes(indexCode) ? '所属学院' : '所属二级学院'
                "
            ></el-table-column>
            <el-table-column
                width="120"
                property="affiliatedResearchDepartment"
                :label="['bzr'].includes(indexCode) ? '所属班级' : '所属教研室'"
            ></el-table-column>
            <el-table-column
                width="110"
                property="totalControlPoints"
                label="质控点总数"
            ></el-table-column>
            <el-table-column
                width="130"
                property="numberOfWarnings"
                label="当前预警中数量"
            ></el-table-column>
            <el-table-column
                width="110"
                property="earlyWarningRate"
                label="当前预警率"
            ></el-table-column>
            <el-table-column
                width="110"
                property="totalNumberAlerts"
                label="预警总次数"
            ></el-table-column>
            <el-table-column
                property="handleWarningSum"
                width="130"
                label="处理预警总次数"
            ></el-table-column>
            <el-table-column
                property="earlyWarningHandlingRate"
                width="130"
                label="预警处理率"
            ></el-table-column>
            <el-table-column label="操作" fixed="right" width="100">
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        size="small"
                        @click="lockDetail(scope.row)"
                        >查看明细</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页器-->
        <pagination
            v-show="total > 0"
            :total="total"
            :current.sync="page.pageIndex"
            :size.sync="page.pageSize"
            @pagination="pagination"
        />
        <!-- <el-dialog
            title="提示"
            :modal="false"
            :visible.sync="dialogVisible"
            width="30%"
            :close="close"
        >
            <span>这是一段信息</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false"
                    >确 定</el-button
                >
            </span>
        </el-dialog> -->
    </div>
</template>

<script>
import * as echarts from 'echarts';
import {
    getQualityData,
    getQualityDataLimit,
    getQualityDataLimitExport,
    getTeacherQualityDataLimit,
    getTeacherQualityDataLimitExport
} from '@/api/cockpit';
import { mapState } from 'vuex';
import cockpitSearch from '@/components/search/cockpitSearch.vue';

export default {
    name: 'QcPoint',
    components: { cockpitSearch },
    props: {
        manageType: {
            required: true,
            type: String,
            default: ''
        }
    },
    computed: {
        ...mapState({
            indexCode: state => state.cockpit.indexCode,
            code: state => state.cockpit.code,
            year: state => state.cockpit.year,
            stateVal: state => state.cockpit.stateVal
        })
    },
    data () {
        return {
            page: {
                pageIndex: 1,
                pageSize: 10
            },
            total: 0,
            tableData: [],
            searchParams: {},
            echartCode: null,
            echartState: null,
            // 下载文件类型 init 为重置或初始，search为查询时下载类型，ecchart为点击echart时下载类型
            tableDataType: 'init',
            // echart中的层面id
            rectificationRangeId: null,
            // 部门组
            deptArr: [],

            dialogVisible: false,
            tableLoading: false
        };
    },
    mounted () {
        this.initEchart();
        this.getTableData('init');
    },
    methods: {
        initEchart () {
            if (['jys', 'bzr'].includes(this.indexCode)) return;
            var chartDom = document.getElementById('qcPoint');
            var myChart = echarts.init(chartDom);
            const params = {
                year: this.year,
                indexCode: this.indexCode,
                code: ['jxdw'].includes(this.indexCode) ? null : this.code,
                orgId: ['jxdw'].includes(this.indexCode) ? this.code : null,
                collegeId: ['jxdw'].includes(this.indexCode) ? this.code : null,
                indexCodeId: this.indexCodeId
            };
            this.common.load(myChart);
            getQualityData(params).then(res => {
                this.deptArr = res.angleNameList;
                const xAxisNames = [];
                res.angleNameList &&
                    res.angleNameList.map(child => {
                        xAxisNames.push(child.name);
                    });
                var option;
                option = { ...this.common.clinicalChangeOption };
                option.title.text = '质控点预警及处理情况';
                option.tooltip.formatter = params => {
                    // console.log(params, 'tool');
                    // ${this.common.totalEle} 总数 ${Number(params[0].data) + Number(params[1].data)}个<br>
                    // return this.common.formatVal(params, '%');
                    let str = `${params[0].name}<br>`;
                    if (res.angleNameList) {
                        res.angleNameList.map(child => {
                            if (params[0].name === child.name) {
                                str += `
                                质控点预警总数 ${child.totalNumberPointWarnings}条<br>
                                已处理预警总数 ${child.totalNumberProcessed}条<br>
                                未处理预警总数 ${child.totalNumberAlerts}条<br>
                                `;
                            }
                        });
                    }
                    for (let i = 0; i < params.length; i++) {
                        str += `${params[i].marker}
                            ${params[i].seriesName}
                            ${params[i].data}%<br>`;
                    }
                    return str;
                };
                option.xAxis[0].data = xAxisNames || [];
                option.xAxis[0].axisLabel = {
                    interval: 0,
                    formatter: params => {
                        // console.log('formatter', params, params.length);
                        return this.common.formatterAxisLabel(params);
                    }
                };
                option.xAxis[0].axisLabel.rotate = 0;
                option.yAxis[0].name = '预警处理比率(%)';
                const nameArr = ['已处理', '未处理'];
                const datas = res.values || [];
                option.legend.data = nameArr;
                option.series = [];
                for (let i = 0; i < datas.length; i++) {
                    option.series.push({
                        name: nameArr[i],
                        type: 'bar',
                        barWidth: '50px',
                        stack: 'Total',
                        label: {
                            show: true,
                            position: 'inside',
                            formatter: '{c}'
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: datas[i]
                    });
                }
                // 1、清除画布
                myChart.clear();
                myChart.hideLoading();
                // 2、调用setOption
                option && myChart.setOption(option);
            });
            // 3、在渲染点击事件之前先清除点击事件
            myChart.off('click');
            // triggerEvent为true时，触发点击事件
            myChart.on('click', params => {
                console.log(params, 'doplan');
                let state;
                if (params.seriesName === '未处理') {
                    state = 1;
                }
                if (params.seriesName === '已处理') {
                    state = 2;
                }
                // 通过名字获取id
                this.deptArr.map(item => {
                    if (item.name === params.name) {
                        this.rectificationRangeId = item.rectificationRangeId;
                    }
                });
                this.echartState = state;
                if (['zlzx', 'jxdw'].includes(this.indexCode)) {
                    if (
                        params.name === '学校层' ||
                        params.name === 'XT_WH_XX'
                    ) {
                        this.echartCode = 'XT_WH_XX';
                    }
                    if (
                        params.name === '专业层' ||
                        params.name === 'XT_WH_ZY'
                    ) {
                        this.echartCode = 'XT_WH_ZY';
                    }
                    if (
                        params.name === '课程层' ||
                        params.name === 'XT_WH_KC'
                    ) {
                        this.echartCode = 'XT_WH_KC';
                    }
                    if (
                        params.name === '教师层' ||
                        params.name === 'XT_WH_JS'
                    ) {
                        this.echartCode = 'XT_WH_JS';
                    }
                    if (
                        params.name === '学生层' ||
                        params.name === 'XT_WH_XS'
                    ) {
                        this.echartCode = 'XT_WH_XS';
                    }
                }
                this.tableDataType = 'echart';
                this.$refs.qcPointSearch.resetQueryParam();
                this.getTableData('echart');
            });
        },
        handleSearch (params, isSearch, empty) {
            if (isSearch === 'init') this.page.pageIndex = 1;
            console.log(params, isSearch, 'ab');
            this.tableDataType = isSearch;
            this.searchParams = { ...params };
            this.getTableData(isSearch);
        },
        // 获取参数
        getParams (searchType) {
            console.log(searchType, 'searchType2');
            const defaultParam = {
                indexCode: this.indexCode,
                code: ['jxdw'].includes(this.indexCode) ? null : this.code,
                yearTime: this.year,
                // orgId: ['jxdw'].includes(this.indexCode) ? this.code : null,
                collegeId: ['jxdw'].includes(this.indexCode) ? this.code : null,
                ...this.page,
                classId: ['jys', 'bzr'].includes(this.indexCode) ? this.code : null
            };
            let params;
            if (searchType === 'init') {
                params = { ...defaultParam, init: 'init' };
            }
            if (searchType === 'search') {
                if (['zlzx', 'cm', 'jxdw'].includes(this.indexCode)) {
                    params = {
                        ...defaultParam,
                        ...this.searchParams,
                        code: this.searchParams.indexX
                            ? this.searchParams.indexX
                            : this.code,
                        search: 'search',
                        state: this.searchParams.warningStatus,
                        orgId: this.searchParams.belongPart
                    };
                } else {
                    params = {
                        ...defaultParam,
                        ...this.searchParams,
                        orgId: this.searchParams.belongTwoLevelSchool,
                        search: 'search'
                    };
                }
            }
            if (searchType === 'echart') {
                params = {
                    ...defaultParam,
                    state: this.echartState,
                    code: ['zlzx', 'cm', 'jxdw'].includes(this.indexCode)
                        ? this.echartCode
                        : null,
                    rectificationRangeId:
                        this.indexCode === 'zlzx'
                            ? null
                            : this.rectificationRangeId,
                    echart: 'echart'
                };
            }
            return params;
        },
        // searchType: 'search' 为查询参数 ，'init' 为初始参数,'echart' 为echarts查询参数
        getTableData (searchType) {
            this.tableLoading = true;
            if (['zlzx', 'cm', 'jxdw'].includes(this.indexCode)) {
                getQualityDataLimit(this.getParams(searchType)).then(res => {
                    this.tableData = res.dataList;
                    this.pageSize = res.size;
                    this.total = res.total;
                    this.tableLoading = false;
                });
            } else {
                getTeacherQualityDataLimit(this.getParams(searchType)).then(res => {
                    this.tableData = res.dataList;
                    this.pageSize = res.size;
                    this.total = res.total;
                    this.tableLoading = false;
                });
            }
        },
        // 下载文件 downloadType: true 为查询参数 ，否则为初始参数
        downloadFile () {
            if (['zlzx', 'jxdw', 'cm'].includes(this.indexCode)) {
                getQualityDataLimitExport(
                    this.getParams(this.tableDataType)
                ).then(res => {
                    console.log(res);
                    this.downFile(res);
                    this.$refs.qcPointSearch.downloading = false;
                });
            } else {
                getTeacherQualityDataLimitExport(
                    this.getParams(this.tableDataType)
                ).then(res => {
                    console.log(res);
                    this.downFile(res);
                    this.$refs.qcPointcockSearch.downloading = false;
                });
            }
        },
        downFile (res) {
            this.common.downloadFile(res, {
                name: `${this.year}年${this.manageType}`,
                fileType: '.xlsx'
            });
        },
        // 分页器参数回传方法
        pagination (page) {
            console.log(page, 'params');
            this.page = page;
            this.getTableData(this.tableDataType);
        },
        // 查看明细
        lockDetail (item) {
            // this.dialogVisible = true;
        },
        close () {},
        reset () {
            this.$refs.qcPointcockSearch && this.$refs.qcPointcockSearch.reset();
            this.$refs.qcPointSearch && this.$refs.qcPointSearch.reset();
        }
    }
};
</script>
<style lang="scss" scoped>
.echart-h {
    height: 440px;
}
</style>
